<template>
  <div class="tabbar">
    <ul class="tabbat-container">
      <li v-for="(item,index) of routerList" :key="index" @click="switchTab(item.path)" class="tabbar-item">
        <img :src="$route.path == item.path?item.selected:item.active" alt="">
        <span>{{item.title}}</span>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  components: {},
  data () {
    return {
      routerList:[
      {
        title:'首页',
        path:'/home',
        active:require('@public/images/home.png'),
        selected:require('@public/images/home-select.png')
      },
      {
        title:'分类',
        path:'/list',
        active:require('@public/images/list.png'),
        selected:require('@public/images/list-select.png')
      },
      {
        title:'购物车',
        path:'/cart',
        active:require('@public/images/cart.png'),
        selected:require('@public/images/cart-select.png')
      },
      {
        title:'我的',
        path:'/my',
        active:require('@public/images/my.png'),
        selected:require('@public/images/my-select.png')
      }
      ]
    }
  },
  computed: {},
  watch: {},
  methods: { 
    switchTab(path){
      if(this.$route.path == path){
        return
      }
      this.$router.push(path)
    }
  },
  created () {},
  mounted () {},
  beforeCreate () {},
  beforeMount () {},
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {},
  activated () {}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.tabbar{
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
  .tabbat-container{
    display: flex;
    width: 100%;
    height: 1.6rem;
    .tabbar-item{
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      flex: 1;
      img{
        width: .7467rem;
      }
    }
  }
}
</style>
